<!--
 * @Descripttion: 轮播图
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-04-25 14:43:37
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-04-25 19:17:51
-->
<template>
  <div id="banner" class="m-banner hidden-xs aaa">
    <div class="bg">
      <div
        class="itm bannerIn"
        :style="{
          background: `url(${config.Banner.max.bg}) top center no-repeat`,
        }"
      ></div>
    </div>
    <ul>
      <li class="scene-1">
        <div class="text">
          <!-- <h2 class="slogan">诚实的荣誉属于真正的好人</h2> -->
          <a class="slogan">{{ config.Banner.max.slogan }}</a>
        </div>
        <div class="image fadeInUp animated">
          <div class="device-desktop"></div>
          <div class="device-mobile"></div>
        </div>
        <div class="shadow"></div>
      </li>
      <li class="scene-2">
        <div class="image"></div>
        <div class="text" style="color: black">
          <h2>{{ config.Banner.max.text.h2 }}</h2>
          <p>{{ config.Banner.max.text.p1 }}</p>
          <p>{{ config.Banner.max.text.p2 }}</p>
        </div>
      </li>
    </ul>
  </div>
  <div
    id="carousel-example-generic"
    class="carousel slide hidden-lg"
    data-ride="carousel"
  >
    <ol class="carousel-indicators">
      <li
        data-target="#carousel-example-generic"
        data-slide-to="0"
        class="active"
      ></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img :src="config.Banner.min[0].src" :alt="config.Banner.min[0].alt" />
      </div>
      <div class="item">
        <img :src="config.Banner.min[1].src" :alt="config.Banner.min[1].alt" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
export default class extends Vue {}
</script>

<style>
</style>